<template>
	<view class="Header">
		<view class="myHeader">
			<view class="logos">
				大大商城
			</view>
			<view class="searchs">
				<uni-icons type="search" size="30"></uni-icons><input type="text" name="" id=""
					placeholder="请输入想搜索的商品..." @tap="goShowContract">
			</view>
			<view class="search-button">
				<view class="button" @click="onSearch">取消</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="backgroundBanner">
			<view class="banner">
				<swiper autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#fff"
					easing-function="true" indicator-dots='true'>
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<img :src="item.url"></img>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 分类部分 -->
		<view class="cates">
			<view class="cate-item" v-for="(cateItem,cateIndex) in cateList" :key="cateIndex" @tap="fun(cateItem)">
				<image :src="cateItem.cateUrl"></image>
				<text>{{cateItem.cateName}}</text>
			</view>
		</view>
		<hr>
		<view class="time">
			<view class="timeTop">
				<view class="logo">
					<image src="../../static/zhong.jpg" mode=""></image>
					<!-- <uni-icons type="notification-filled" size="20"></uni-icons> -->
					<text>限时秒购</text>
				</view>
				<view class="timeFinish">
					<text>距结束</text>
					<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF"
						background-color="#007AFF" />
				</view>
			</view>
			<view class="timeBottom">
				<view class="timeItem" v-for="(timeItem,timeIndex) in timesList[0].data" :key="timeIndex">
					<image :src="timeItem.timesUrl"></image>
					<view class="timeText">
						<text class="timeText1">￥{{timeItem.price}}</text>
						<text class="timeText2">￥{{timeItem.oldprice}}</text>
					</view>
				</view>
			</view>
			<hr>
			<one></one>	
			</view>	
		</view>
	</view>
		

</template>

<script>
	import one from '@/components/one.vue'
	import {mapState} from 'vuex'
	export default {
		components:{
			one,
		},
		data() {
			return {
				cateList: [{
						cateId: 0,
						cateUrl: "../../static/zhong.jpg",
						cateName: '限时秒杀',
						path:''
					},
					{
						cateId: 0,
						cateUrl: '../../static/che.jpg',
						cateName: '断货清仓',
						path:'./okoko'
						
					},
					{
						cateId: 0,
						cateUrl: "../../static/yi.jpg",
						cateName: '宝藏女装',
					},
					{
						cateId: 0,
						cateUrl: "../../static/b3.jpg",
						cateName: '多多果园',
					},
					{
						cateId: 0,
						cateUrl: "../../static/9.9.jpg",
						cateName: '9块9特卖',
					},
					{
						cateId: 0,
						cateUrl: "../../static/1a.jpg",
						cateName: '签到',
					},
					{
						cateId: 0,
						cateUrl: "../../static/yao.jpg",
						cateName: '医药馆',
					},
					{
						cateId: 0,
						cateUrl: "../../static/54e.jpg",
						cateName: '省钱月卡',
					},

				],
				// //商品实例图
				bannerList: [{
						id: 1,
						url: '../../static/temp1.jpg'
					},
					{
						id: 2,
						url: '../../static/temp2.jpg'
					},
					{
						id: 3,
						url: '../../static/temp3.jpg'
					},
					{
						id: 4,
						url: '../../static/temp4.jpg'
					},
					{
						id: 5,
						url: '../../static/temp5.jpg'
					},
				],
			}
		},
		computed:{
		...mapState([
		               'timesList'
		           ])
		},
		methods: {
			goShowContract() {
				uni.navigateTo({
					url: '/pages/index/show-contract'
				})
			},
			fun(cateItem){
				uni.navigateTo({
					url:cateItem.path,
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.myHeader {
		display: flex;
		padding: 10rpx;
		align-items: center;

		.logos {
			width: 140rpx;
			height: 40rpx;
		}

		.searchs {
			border: 1px solid black;
			border-radius: 10rpx;
			flex: 1;
			margin: 0 10rpx;
			width: 80rpx;
			padding-left: 14rpx;
			display: flex;
			align-items: center;
			padding: 4rpx 10rpx;
			vertical-align: top;
		}

		.btn {
			width: 80rpx;
			text-align: center;
		}
	}



	.backgroundBanner {
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		margin: 0 auto;
	}

	.banner swiper {
		height: calc(750rpx / 1.9); //calc(屏幕宽度 / (图片宽度 / 图片高度))
	}

	.banner img {
		width: 100%;
		height: 100%;
	}



	.cates {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.cate-item {
			width: 20%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.cates {
		width: 100%;
		height: 400rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;

		.cate-item {
			width: 22%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			// flex-flow: wrap;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}




	.time {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;

		.timeTop {
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20rpx;

			.logo {
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 16px;
				}
			}

			.timeFinish {
				margin-right: 20rpx;
				display: flex;
				align-items: center;

				text {
					font-size: 14px;
				}
			}
		}

		.timeBottom {
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.timeItem {
				width: 26%;
				justify-content: space-around;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 10px;
				box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

				image {
					width: 100%;
					height: 100px;
					margin-bottom: 10px;
				}

				.timeText {
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					.timeText1{
						margin-right: 5px;
					}

					.timeText2 {
						color: #f16246;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>